<!--
 * @Description: 表格内部状态信息展示
 * @Pramas: type => normal, warning
 * @Pramas: color 设置color后type不再生效
 * @Author: 黄勇
 * @Date: 2019-07-19 10:28:03
 * @LastEditTime: 2020-03-31 17:36:34
 * @LastEditors: 黄勇
 -->
<template>
<div :class="['app-status', `app-status__${type}`]" >
    <div class="app-status__circle" :style="{backgroundColor: color, boxShadow: `0 0 3px 2px ${color}`}"></div>
    <div class="app-status__text text-left text-ellipsis" :style="{color: color}" :title="text">{{text}}</div>
</div>
</template>

<script>
export default {
    props: {
        type: {
            type: String,
            deafult: "normal", // warning, error
        },
        color: {
           type: String
        },
        text: {
           type: String 
        }
    },
    data() {
        return {};
    },
    computed: {},
    methods: {}
};
</script>
<style lang="scss" scoped>
.app-status {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    .app-status__circle {
        flex: 0 0 8px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .app-status__text {
        width: 100px;
        flex: 1;
    }

    &.app-status__normal {
        color: #67C13A;
        .app-status__circle {
            background-color: #67C13A;
		    box-shadow: 0 0 3px 2px #67C13A;
        }  
    }

     &.app-status__warning {
        color: #F56C6C;
        .app-status__circle {
            background-color: #F56C6C;
		    box-shadow: 0 0 3px 2px #F56C6C;
        }  
    }
     &.app-status__error {
        color: #000;
        .app-status__circle {
            background-color: #000;
		    box-shadow: 0 0 3px 2px #000;
        }  
    }
}
</style>